<script setup lang="ts">
import { ref, computed } from "vue";
import { useSafetyManageHook } from "./utils/selfCheckhook";
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
import Delete from "@iconify-icons/ep/delete";
import Search from "@iconify-icons/ep/search";
import Refresh from "@iconify-icons/ep/refresh";
import EditPen from "@iconify-icons/ep/edit-pen";
import Detail from "@iconify-icons/ep/view";
import { SirSelfCheckBo } from "@/api/airport/dataManage/sirSelfCheck";
import AddFill from "@iconify-icons/ri/add-circle-line";
import { CommonUtils } from "@/utils/common";

defineOptions({
  name: "selfcheck"
});

// 接收 inspectionId 属性
const props = defineProps<{
  inspectionId?: string;
}>();

const tableRef = ref();
const searchFormRef = ref();

// 将 inspectionId 传递给 hook
const {
  searchFormParams,
  pageLoading,
  columns,
  dataList,
  pagination,
  timeRange,
  defaultSort,
  multipleSelection,
  onSearch,
  resetForm,
  onSortChanged,
  exportAllExcel,
  getSirSelfCheckList,
  handleDelete,
  handleBulkDelete
} = useSafetyManageHook(props.inspectionId);

const opType = ref<"add" | "update">("add");
const modalVisible = ref(false);
const opRow = ref<SirSelfCheckBo>();
const detailVisible = ref(false);
const detailRow = ref<SirSelfCheckBo>();

const {
  professionalOptions
} = useSafetyManageHook(props.inspectionId);

const ROW_HEIGHT = 40;
const HEADER_HEIGHT = 40;

const tableHeight = computed(() => {
  return dataList.value.length * ROW_HEIGHT + HEADER_HEIGHT+20;
});

const emit = defineEmits<{
  (e: "success"): void;
  (e: "selection-change", selection: any[]): void;
}>();

// 移除选择框相关逻辑
const handleSelectionChange = (selection: any[]) => {
  emit("selection-change", selection);
};

</script>

<template>
  <div class="main">
    <el-form
      ref="searchFormRef"
      :inline="true"
      :model="searchFormParams"
      class="search-form bg-bg_color w-[99/100] pl-8 pt-[12px]"
    >
      <el-form-item label="专业" prop="professional">
        <el-select
          v-model="searchFormParams.professional"
          placeholder="请选择专业"
          clearable
          class="!w-[200px]"
        >
          <el-option
            v-for="item in professionalOptions"
            :key="item"
            :label="item"
            :value="item"
          ></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="检查内容" prop="checkContent">
        <el-input
          v-model="searchFormParams.checkContent"
          placeholder="请输入检查内容"
          clearable
          class="!w-[200px]"
        />
      </el-form-item>

      <el-form-item label="符合性判定标准" prop="complianceCriteria">
        <el-input
          v-model="searchFormParams.complianceCriteria"
          placeholder="请输入符合性判定标准"
          clearable
          class="!w-[200px]"
        />
      </el-form-item>

      <el-form-item>
        <el-button
          type="primary"
          :icon="useRenderIcon(Search)"
          :loading="pageLoading"
          @click="onSearch(tableRef)"
        >
          搜索
        </el-button>
        <el-button
          :icon="useRenderIcon(Refresh)"
          @click="resetForm(searchFormRef, tableRef)"
        >
          重置
        </el-button>
      </el-form-item>
    </el-form>
    <div style="height: 15px;"></div>

    <!-- 移除 PureTableBar 组件 -->
    <pure-table
      border
      ref="tableRef"
      align-whole="center"
      showOverflowTooltip
      table-layout="auto"
      :loading="pageLoading"
      :data="dataList"
      :columns="columns"
      :default-sort="defaultSort"
      :pagination="pagination"
      :header-cell-style="{
        background: 'var(--el-table-row-hover-bg-color)',
        color: 'var(--el-text-color-primary)'
      }"
      @page-size-change="getSirSelfCheckList"
      @page-current-change="getSirSelfCheckList"
      @sort-change="onSortChanged"
      :height="tableHeight"
    >
    </pure-table>

    <sirSelfCheck-form-modal
      v-model="modalVisible"
      :type="opType"
      :row="opRow"
      @success="onSearch"
    />
    <sirSelfCheck-detail-modal
      v-model="detailVisible"
      :row="detailRow"
    />
  </div>
</template>

<style scoped lang="scss">
:deep(.el-dropdown-menu__item i) {
  margin: 0;
}

.search-form {
  :deep(.el-form-item) {
    margin-bottom: 12px;
  }
}
</style>
